<template>
	<view class="v-home-page" :style="{ '--bg-image': `url(${ materialBg})` }">
		<view :style="{ height: navTop + 'px' }"></view>
		<view id="barTitle" :style="{ opacity: opacityStyle, height: heightSystemss+Number(50) + 'px' }"
			v-show="!hiddenModel">
			<text>声音列表</text>
		</view>
		<view class="flex-start-center margin-bottom_50rpx" style="color:#333333;margin-left: 10rpx;"
			@click="localFn()">

			<uni-icons style="margin-top: 7rpx;" color="#333333" type="left" size="20"></uni-icons>
			<text style="color: 333333;font-size: 33rpx;"> 声音列表</text>
		</view>


		<view class="display-a margin-bottom_40rpx margin-top_30rpx padding_0_20rpx">
			<view class="label" @click="getLabel(0)" :style="selLabel == 0 ? 'color:#FFFFFF;background: #1E6CEB;' : ''">
				全部</view>
			<view class="label" @click="getLabel(1)" :style="selLabel == 1 ? 'color:#FFFFFF;background: #1E6CEB;' : ''">
				生成中</view>
			<view class="label" @click="getLabel(2)" :style="selLabel == 2 ? 'color:#FFFFFF;background: #1E6CEB;' : ''">
				生成成功</view>
			<view class="label" @click="getLabel(3)" :style="selLabel == 3 ? 'color:#FFFFFF;background: #1E6CEB;' : ''">
				生成失败</view>
			<view class="label" @click="getLabel(4)" :style="selLabel == 4 ? 'color:#FFFFFF;background: #1E6CEB;' : ''">
				已退款</view>

		</view>

		<!-- 标准声音克隆 / 高保真声音克隆 -->
		<mescroll-body ref="mescrollRef" :height="windowHeight + 'rpx'" @init="mescrollInit" @down="downCallback"
			@up="upCallback" :up="upOption" :down="downOption">
			<view class="display-fw-js ">
				<block v-for="(item, index) in list" :key="index">
					<block>
						<view class="list-public display-a">

							<view class="r-status"
								:class="item.is_status == '1' ? 'color_FFFFFF' : item.is_status == '3' ? 'color_FF0000' :  item.is_status == '2'?'r-status-1':'r-status-3'">
								{{ item.is_status == '2' ? '已完成' : item.is_status == '3' ? '已失败' : item.is_status == '1'?'生成中':'已退款' }}
							</view>

							<image class="img-97" :src="digitalPeopleIndex3"></image>
							<view class="margin-left_16rpx">
								<view class="display-a">
									<!-- 	<view class="r-fast" :class="item.train_mode == 1 ? 'r-fast-1' : 'r-fast-2'">
							{{ item.train_mode == 1 ? '快速' : '高级' }}
						</view> -->


									<view class="r-name">{{item.name }}
									</view>
								</view>
								<view class="flex-align-center m-top10">
									<view class="" style="color: rgba(153, 153, 153, 1);">
										{{item.sex==1?'男':'女'}}
									</view>
									<text class="padding_0_10rpx" style="color: rgba(153, 153, 153, 1);">|</text>
									<view class="" style="color: rgba(153, 153, 153, 1);">
										{{item.age_group==1?'儿童':item.age_group==2?'青年':item.age_group==3?'中年':'中老年'}}
									</view>
									<text class="padding_0_10rpx" style="color: rgba(153, 153, 153, 1);">|</text>
									<view class="" style="color: rgba(153, 153, 153, 1);">
										{{item.language==0?'中文':item.language==1?'英文':item.language==2?'日语':item.language==3?'韩语':'俄语'}}
									</view>

									<!-- <view class="r-date">{{ item.create_time }} |</view> -->
									<view class="flex-align-center margin-left_16rpx" @click="delAudio(item)">
										<uv-icon
											class=" padding-right_10rpx icon-cls p-right10 font-size_30rpx color999"
											size="40rpx" style="margin:4rpx 14rpx 0rpx 20rpx;font-weight: 600;"
											name="trash"></uv-icon>
										<!-- <i class="el-icon-delete font-size_30rpx color999" style="margin:4rpx 14rpx 0rpx 20rpx;font-weight: 600;"></i> -->
										<view class="font-size_26rpx color999">删除</view>
									</view>
								</view>
							</view>
							<block v-if="item.is_status == '2'">
								<view class=" r-play" @click="pause(item,index)" v-if="!isPlay&& (index==currentIndex)">
									<image class="img-94" :src="digitalPeopPlay3"></image>
								</view>
								<view class="display-a-jc r-play" @click="play(item,index)" v-else>
									<image class="img-94" :src="digitalPeopPause3"></image>
								</view>
								<!-- 
						<view @click="play" v-if="isPlay"><image class="img-94" src="/static/digitalPeople/pause2.png"></image></view>
						<view @click="pause" v-else><image class="img-94" src="/static/digitalPeople/play2.png"></image></view> -->
							</block>
							<block v-else>
								<view class=" r-pause">
									<image class="img-94" :src="digitalPeople94"></image>
								</view>
							</block>
						</view>
					</block>

				</block>
				<!-- <image @click="delAudio(item.id, item.name)" class="img-96" :src="imgUrl + '96.png'"></image> -->
			</view>


		</mescroll-body>




	</view>
</template>

<script>
	const innerAudioContext = uni.createInnerAudioContext();
	export default {
		data() {
			return {
				currentIndex: '',
				list: [],
				navTop: '',
				materialBg: this.$imgs.violet,
				arrTab1: [{
						id: '',
						name: '全部'
					},
					{
						id: 'init',
						name: '生成中'
					},
					{
						id: 'success',
						name: '已完成'
					},
					{
						id: 'fail',
						name: '已失败'
					}
				],
				cIndex: 0,
				selLabel: 0,
				digitalPeople94: 'https://yuntt.weijuyunke.com/yunttXcxImage/digitalPeople/94.png',

				digitalPeople131: 'https://yuntt.weijuyunke.com/yunttXcxImage/digitalPeople/131.png',
				digitalPeople132: 'https://yuntt.weijuyunke.com/yunttXcxImage/digitalPeople/132.png',
				digitalPeopleIndex3: 'https://yuntt.weijuyunke.com/yunttXcxImage/digitalPeople/index3.png',
				digitalPeopPause3: 'https://yuntt.weijuyunke.com/yunttXcxImage/digitalPeople/pause3.png',
				digitalPeopPlay3: 'https://yuntt.weijuyunke.com/yunttXcxImage/digitalPeople/play3.png',
				isPlay: 1,
				hiddenModel: true, //显示影藏
				opacityStyle: 0, //透明度
				heightSystemss: "",
				isWhether: true,
				urlVoice: '',
				tallySet: uni.getStorageSync('tallySet'),
				user: uni.getStorageSync('user'),

				content: ['秋天的公园里，落叶铺满了小路，踏上去有种说不出的舒爽，偶然间抬头，那抹深秋的蓝天格外高远、明净。']

				// sex: this.form.sex, // 1男2女
				// age_group: this.form.ageGroup, //1 儿童 2 青年3 中年4，中老年’
				// language: this.form.language, // 0中文1英文2日3韩4俄'

			}
		},
		onLoad() {

			const app = getApp();
			this.navTop = app.globalData.navTop;
			this.createdgetSystemInfo()

			this.tallySetFn()
			this.userInfos()


		},
		onPageScroll(ev) {


			if (ev.scrollTop > 10) {
				let opacity = ev.scrollTop / 140

				// this.opacityStyle = opacity > 1 ? 1 : opacity
				this.opacityStyle = 1
				this.hiddenModel = false
				// this.createdgetSystemInfo();

			} else {
				this.hiddenModel = true
			}
		},
		onHide() {
			// 页面隐藏时调用
			console.log('页面隐藏');
			// 在这里执行需要的操作
			this.isPlay = '';

			if (this.urlVoice) {
				this.pause(this.urlVoice)
			}

		},
		onShow() {


			this.$nextTick(() => {
				this.mescroll.resetUpScroll();
			});

		},
		computed: {


		},
		methods: {
			async userInfos() {
				const result = await this.$http.get({
					url: this.$api.userInfo,
					data: {
						// 用户id
						uid: uni.getStorageSync('uid'),
						// 上级id
						// pid: ''
					}
				});
				if (result.errno == 0) {
					this.user = result.data;

					uni.setStorageSync('user', result.data);


				}
			},
			async tallySetFn() {
				const result = await this.$http.get({
					url: this.$api.tallySet,

				});
				if (result.errno == 0) {
					console.log(result.data)

					uni.setStorageSync('tallySet', result.data);



				} else {
					this.$sun.toast(result.message, 'none')
				}
			},
			createdgetSystemInfo() {
				let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
				uni.getSystemInfo({
					//获取系统信息
					success: res => {
						let navHeight = menuButtonObject.height + (menuButtonObject.top - res
							.statusBarHeight) * 2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
						this.heightSystemss = navHeight;
						console.log(navHeight, '==========================')

					},
					fail(err) {
						console.log(err);
					}
				});
			},

			getLabel(index) {
				this.selLabel = index;

				this.$nextTick(() => {
					this.mescroll.resetUpScroll();
				});



			},

			async soundSaveFn(id, index) {
				let totalDeduction = ((this.content[0].length / 100) * this.tallySet.sound_tally).toFixed(2);
				if (totalDeduction < 100) {
					totalDeduction = this.tallySet.sound_tally; // 如果次数小于100，直接扣50点
				}

				if (Number(this.user.balance) <= Number(totalDeduction)) {
					this.$sun.toast('每一百字扣 ' + this.tallySet.sound_tally + '算力,当前算力不足无法提交', 'none')
					return
				}
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				const result = await this.$http.post({
					url: this.$api.soundSave,
					data: {
						uid: uni.getStorageSync('uid'),
						type: 0,
						task_id: 0,
						voice_id: id,
						msg: [this.content[0]]
					}
				});
				if (result.errno == 0) {

					uni.hideLoading()
					this.voiceSetDemoFn(id, result.data, index)


				} else {
					setTimeout(() => {
						this.$sun.toast(result.message, 'none')
					}, 200)
					uni.hideLoading()
				}
			},
			async voiceSetDemoFn(voice_id, sound_id, index) {
				const result = await this.$http.post({
					url: this.$api.voiceSetDemo,
					data: {
						uid: uni.getStorageSync('uid'),

						voice_id: voice_id,
						sound_id: sound_id
					}
				});
				if (result.errno == 0) {
					console.log(result.data)

					this.currentIndex = index
					this.isPlay = '';

					this.urlVoice = result.data
					innerAudioContext.src = result.data
					setTimeout(() => {
						this.mescroll.resetUpScroll();
					}, 200)



					innerAudioContext.play();
					innerAudioContext.onPlay(() => {


						console.log('开始播放');
					});
					innerAudioContext.onEnded(() => {
						this.isPlay = 1;

						innerAudioContext.pause();
						// this.$sun.toast("音频播放完成");
						console.log('音频播放结束：');



					});
					innerAudioContext.onError(err => {
						innerAudioContext.destroy();
						console.log('播放音频出错：', err);
					});



				} else {
					this.$sun.toast(result.message, 'none');
				}
			},


			/* 声音播放 start */
			play(speech, index) {
				if (!speech.demo) {
					uni.showModal({
						title: '数字人试听',
						content: '每一百字扣 ' + this.tallySet.sound_tally + '算力,后续试听不在扣除算力',
						confirmText: '试听',
						confirmColor: '#4A5EFF',
						success: async (res) => {
							if (res.confirm) {
					
									this.soundSaveFn(speech.id, index)
					
					
							} else if (res.cancel) {
					
							}
						}
					});
				
				} else {

					this.currentIndex = index
					this.isPlay = '';

					this.urlVoice = speech.demo
					innerAudioContext.src = speech.demo




					innerAudioContext.play();
					innerAudioContext.onPlay(() => {
						console.log('开始播放');
					});
					innerAudioContext.onEnded(() => {
						this.isPlay = 1;

						innerAudioContext.pause();
						// this.$sun.toast("音频播放完成");
						console.log('音频播放结束：');

						setTimeout(() => {
							this.mescroll.resetUpScroll();
						}, 200)

					});
					innerAudioContext.onError(err => {
						innerAudioContext.destroy();
						console.log('播放音频出错：', err);
					});

				}




			},
			pause(speech) {

				this.isPlay = 1;
				innerAudioContext.src = speech.voice_urls[0]
				// 获取音频时长
				innerAudioContext.autoplay = true;
				this.$nextTick(() => {
					innerAudioContext.pause();
				});
			},
			//保存到相册
			async longpress() {
				if (!this.isWhether) {
					return;
				}
				this.isWhether = false;
				console.log(this.obj.resultUrl)


				uni.downloadFile({
					url: this.obj.resultUrl,
					success: res => {
						if (res.statusCode === 200) {
							uni.saveVideoToPhotosAlbum({
								filePath: res.tempFilePath,
								success: r => {
									this.isWhether = true;
									uni.hideLoading();
									this.$sun.toast('保存视频成功');
								},
								fail: e => {
									// console.log(res);
									if (e.errMsg ==
										'saveVideoToPhotosAlbum:fail auth deny'
									) {
										uni.hideLoading();
										uni.showModal({
											title: '您需要授权相册权限',
											success(res) {
												if (res
													.confirm) {
													uni.openSetting({
														success(
															res
														) {},
														fail(
															res
														) {
															// console.log(res);
														}
													});
												}
											}
										});
									} else if (e.errMsg ==
										'saveVideoToPhotosAlbum:fail file not exists'
									) {
										this.isWhether = true;
										uni.hideLoading();
										this.$sun.toast(
											'保存失败,视频文件不存在!', 'none'
										);
									} else {
										this.isWhether = true;
										uni.hideLoading();
										console.log('err==>', e);
										this.$sun.toast('保存失败',
											'error');
									}
								}
							});
						} else {
							this.isWhether = true;
							uni.hideLoading();
							this.$sun.toast('下载失败', 'error');
						}
					},
					fail: err => {
						uni.hideLoading();
						this.$sun.toast(err, 'error');
						this.isWhether = true;
					}
				});


			},

			// 删除音频
			delAudio(obj) {
				uni.showModal({
					title: '提示',
					content: '确定要删除此声音吗?',
					success: async res => {
						if (res.confirm) {

							const result = await this.$http.post({
								url: this.$api.voiceDel,
								data: {
									uid: uni.getStorageSync('uid'),
									voice_id: obj.id
								}
							});
							if (result.errno == 0) {
								this.$sun.toast('删除成功');
								setTimeout(() => {
									this.$nextTick(() => {
										this.mescroll.resetUpScroll();
									});
								}, 2000);
							} else {
								this.$sun.toast(result.message, 'none');
							}
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},

			localFn() {
				this.$sun.navBack()
			},

			//作品记录
			async upCallback(scroll) {

				const result = await this.$http.post({
					url: this.$api.voiceList,
					data: {
						uid: uni.getStorageSync("uid"),

						is_status: this.selLabel == 0 ? '' : this.selLabel,

						page: scroll.num,
						psize: 10
					}
				});
				if (result.errno == 0) {

					this.mescroll.endByPage(result.data.list.length, result.data.total);
					if (scroll.num == 1) this.list = [];
					this.list = this.list.concat(result.data.list);
					console.log(this.list)
				}

			},


		}
	}
</script>

<style lang="less">
	.v-home-page {
		background-image: (var(--bg-image));
		background-repeat: no-repeat;
		background-size: contain;
		position: relative;
		height: 100vh;
		// padding: 20rpx;
		position: relative;

		.label {
			background-color: #fff;
			color: #A1A1A1;
			border-radius: 10rpx;
			padding: 8rpx 16rpx;
			display: inline-block;
			margin-right: 20rpx;


		}

		#barTitle {
			position: fixed;
			width: 750rpx;
			top: 0;
			left: 0;
			background: #fff;
			color: #000000;
			text-align: center;
			font-weight: bold;
			z-index: 9999
		}

		#barTitle>text {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 20rpx
		}


		.color_9B9B9B {
			color: #9b9b9b;
			font-size: 32rpx;
			margin-bottom: 10rpx;
		}

		.color_4088FF {
			color: #4088ff;
			font-weight: bold;
			font-size: 32rpx;
			margin-bottom: 10rpx;
		}

		.c-line-2 {
			// background: #000;
		}

		.c-line-1 {
			background: rgb(30, 108, 235);
		}

		.c-line {
			width: 66rpx;
			height: 8rpx;
			border-radius: 100rpx;
		}

		.display-ac-jc {
			width: 375rpx;
		}

		.c-top {
			padding: 30rpx 0;
			border-bottom: 2rpx solid #f1f1f1;
			// border-bottom: 2rpx solid rgb(18, 18, 18);;
		}

		.r-text {
			text-align: center;
			font-size: 26rpx;
			padding-top: 440rpx;
		}

		.o-input {
			width: 300rpx;
			margin-left: 10rpx;
			// color: #fff;
		}

		.o-search {
			width: 710rpx;
			background-color: #fff;
			border-radius: 100rpx;
			margin: 0 20rpx 30rpx;
			padding: 16rpx 0;
		}

		.tab-name-2 {
			background-color: #008eff;
			color: #fff;
		}

		.tab-name-1 {
			background-color: #fff;
			color: #999999;
		}

		.tab-name {
			width: 120rpx;
			text-align: center;
			padding: 8rpx 0;
			border-radius: 10rpx;
			margin-left: 30rpx;
		}

		.p-data {
			padding: 40rpx 0;
			text-align: center;
			width: 750rpx;
		}

		.img-59 {
			width: 32rpx;
			height: 32rpx;
		}

		.r-img-bg {
			width: 344rpx;
			height: 610rpx;
			border-radius: 10rpx 10rpx 0 0;
			background-repeat: no-repeat;
			background-size: contain;
		}

		.img-cls {
			color: #fff;
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
			background-color: rgba(102, 102, 102, 0.5);
		}

		.r-video {
			width: 344rpx;
			height: 610rpx;
			border-radius: 10rpx 10rpx 0 0;
		}

		.r-status-3 {
			background-color: #ff0000 !important;
		}

		.r-status-2 {
			background-color: #07bd00 !important;
		}

		.r-status-1 {
			background-color: #1377ff !important;
		}

		.r-status {
			width: 100rpx !important;
			padding: 6rpx 0;
			text-align: center;
			border-radius: 10rpx 0 10rpx 0;
			position: absolute;
			top: 0;
			left: 0;
			font-size: 26rpx;
			color: #fff !important;
			z-index: 2;
		}


		.r-frame {
			width: 344rpx;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			background-color: #fff;
			position: relative;
		}

		.boxline {
			background-color: #008eff;
			color: #fff;
			width: 98rpx;
			height: 50rpx;
			border-radius: 8rpx;
			font-size: 24rpx;
		}

		/* 声音克隆样式 start */

		.r-status-1 {
			color: #b4b4b4;
		}

		.r-status {
			position: absolute;
			top: 0;
			right: 0;
			width: 86rpx;
			text-align: center;
			border-radius: 0 10rpx 0 10rpx;
			background-color: #6b6b6b;
			padding: 6rpx 0;
			font-size: 24rpx;
		}

		.r-statusaudio {
			position: absolute;
			top: 0;
			left: 0;
			width: 95rpx !important;
			padding: 6rpx 0;
			text-align: center;
			border-radius: 10rpx 0 10rpx 0;
			background-color: #6b6b6b;
			font-size: 26rpx;
			color: #fff !important;
			z-index: 2;
		}


		.r-date {
			color: #aaa9a9;
			font-size: 26rpx;
		}

		.r-name {
			color: rgb(51, 51, 51);
			font-size: 32rpx;
			font-weight: 600;
			width: 350rpx;
		}

		.r-fast-2 {
			background: linear-gradient(90deg, rgb(0, 177, 255), rgb(0, 82, 255) 100%);
		}

		.r-fast-1 {
			background: linear-gradient(104.04deg, rgb(228, 113, 247) 1.66%, rgb(100, 27, 227) 96.68%);
		}

		.r-fast {
			width: 64rpx;
			border-radius: 10rpx;
			font-size: 24rpx;
			text-align: center;
			color: #fff;
			margin-right: 10rpx;
			padding: 2rpx 0;
		}

		.img-96 {
			width: 36rpx;
			height: 36rpx;
			margin-right: 20rpx;
			margin-left: 24rpx;
		}

		.img-94 {
			width: 100%;
			height: 100%;
		}

		.r-pause {
			width: 56rpx;
			height: 56rpx;
			border-radius: 100rpx;
			background: linear-gradient(180deg, rgb(136, 118, 230), rgb(176, 136, 248) 100%);
			margin-left: auto;
			opacity: 0.5;
			/* 设置透明度为50% */
		}

		.r-play {
			width: 56rpx;
			height: 56rpx;
			border-radius: 100rpx;
			background: linear-gradient(180deg, rgb(136, 118, 230), rgb(176, 136, 248) 100%);
			margin-left: auto;
		}

		.img-97 {
			width: 50rpx;
			height: 50rpx;
			margin-right: 20rpx;
		}

		.list-public {
			padding: 40rpx 30rpx;
			position: relative;
		}

		.releaseTasks {
			text-align: center;
			color: #fff;
			width: 340rpx;
			height: 74rpx;
			line-height: 74rpx;
			border-radius: 0rpx 0rpx 20rpx 20rpx;
			background: #1e6ceb;
		}

		/* 声音克隆样式 end */

		page {
			width: 100%;
			overflow-x: hidden;
			// background-color: #000;
			// border-top: 2rpx solid rgb(56, 56, 56);
		}
	}
</style>